<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        li{
            float: left;
            margin-left: 20px;
            list-style: none;
        }
        .d{
            /*background-color: red;*/
            width: 200px;
            height: 200px;
            padding-left: 50px;
        }
    </style>

</head>

<body>
<ul>
    <li class="tab1">tab1</li>
    <li class="tab2">tab2</li>
    <li class="tab3">tab3</li>
</ul>
<br>

<div class="d">

</div>



</body>

<script src="../js/jquery-1.11.0.min.js"></script>
<script>
    $(function () {
        $(".tab1").click(function () {
            $(".d").css("background-color","red");
        })
        $(".tab2").click(function () {
            $(".d").css("background-color","blue");
        })
        $(".tab3").click(function () {
            $(".d").css("background-color","green");
        })

    })
</script>
</html>